<template>
	<ul :class="[
			[prefixCls+'-menu'],
			mode?[prefixCls+'-menu-'+mode]:'',
			theme?[prefixCls+'-menu-theme-'+theme]:'',
		]">
		<slot></slot>
	</ul>
</template>

<script>
import { prefixCls } from '../prefix'

export default {
	name: `${prefixCls}Menu`,
	props:{
		mode:{
			type:String,
			default:'horizontal'
		},
		active:{
			type:[String , Number],
			default:1
		},
		theme:{
			type:String,
			default:'light'
		},
		accordion:{
			type:Boolean,
			default:false
		},
	},
	data() {
		return {
			prefixCls: prefixCls,
		}
	},
	mounted(){
		this.init();
	},
	watch:{
		active(v) {
			this.init()
		}
	},
	methods:{
		// 初始化激活菜单，这里针对二级菜单激活方法
		init(){
			let actStr = this.active.toString();
			let isSub = actStr.indexOf("-") != -1;
			if(isSub) {
				let index = actStr.lastIndexOf('-');
				let id = actStr.substring(0,index);
				this.changeActive('menuGroup',this.active,id)
			}else{
				this.changeActive('menu',this.active,this.active)
			}
		},
        //使用$children遍历子组件，得到所有的menuItem组件
        // getMenuItem: function() {
        //     return this.$children.filter(function(item) {
        //     	// if(item.$children) {
        //     	// 	item.$children.filter(function(a) {
        //     	// 		return a.$options.name === 'menuitem';
        //     	// 	}
        //     	// }
        //         return item.$options.name === 'menuitem';
        //     })
        // },
		// 导航菜单选中项切换
		changeActive(position,name,id){
			// console.log('%c点击菜单接收到的\n','color:orange','父层：',position,'\nname值：',name,'\n父层name值：',id,)
			
			/**
			 * position	父层组件名称
			 * name 	激活name
			 * id 		上级父层name
			 */
			id = id.toString()
			this.$children.forEach(a=>{

				a.active = name;
				// 如果有子组件，遍历下去，最多三级导航
				if(a.$children.length > 0) {
					//移除二级导航头的active，
					if(a.name != id) {
						a.isActive = false;
						// 第三级菜单不支持手风琴效果
						if(id.indexOf('-') !=-1){
							// console.log('包含')
						}else{
							// console.log('不包含')
							this.accordion?a.isDropDown = false:'';//手风琴效果中，会收起其他展开栏
						}
					}else{
						a.isDropDown = true
						a.isActive = true
					}
					a.$children.forEach(b=>{
						b.$children.forEach(c=>{
							c.active = name;
							if(c.$children.length > 0) {
								// 三级菜单默认有激活，打开它的上级
								if(c.name === id) {
									c.$parent.$parent.isDropDown = true
									c.isDropDown = true
								}else{
									c.isDropDown = false
								}
								c.$children.forEach(d=>{
									d.$children.forEach(e=>{
										e.active = name
									})
								})
							}
						})
					})
				}
			})
		},

		// 菜单选中触发父层绑定的事件，传递name
		menuSelect(name,to,target){
			this.$emit('select',name,to,target)
		},

		onAccordion(id){
			// 手风琴效果，关闭其他元素
		    this.$children.forEach(function (item, i) {
		        if(item.name === id){
		        	item.isDropDown = true 
		        }else{
		        	item.isDropDown = false
		        }
		    })
		}
	},
    provide() {
        return {
            changeActive: this.changeActive,
            menuSelect:this.menuSelect,
        }
    },
}
</script>